<template>
  <div id="body" class="wos-flex wos-flex-row wos-flex-between">
        <div id="left" class="bd">
            <div id="left-content" class="wos-flex wos-flex-column wos-flex-between">
                <div>
                    <img id="logo" src="@/assets/images/login-logo.png" alt="Login">
                    <div id="left-content-title">
                        <div id="title-1">{{websiteConfig.webTitle}}</div>
                        <div id="title-2">{{websiteConfig.subtitle}}</div>
                        <div id="title-3">{{websiteConfig.introduce}}</div>
                    </div>
                </div>
                <div>
                    <img src="@/assets/images/login-icon-1.svg" alt="">
                </div>
            </div>
        </div>
        <div id="right" class="bd">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <div id="right-content">
                <div id="logo" class="wos-flex wos-flex-center">
                    <img src="@/assets/images/logo.svg" alt="logo">
                </div>
                <div class="tip wos-flex wos-flex-center wos-color wos-font-sm">
                    {{getToday()}} 欢迎登陆
                </div>
                <el-form-item prop="username">
                <div class="input-username">
                    <div class="wos-font-sm input-tip">用户名</div>
                    <div class="input wos-flex wos-flex-row wos-align-middle">
                            <img src="@/assets/icon/user-input.svg" >
                        <div class="wos-flex-auto">
                            <el-input type="text" placeholder="请输入用户名或电子邮件" v-model="loginForm.username"/>
                        </div>
                    </div>
                </div>
              </el-form-item>
                <el-form-item prop="password">
                <div class="input-password">
                    <div class="wos-font-sm input-tip">密码</div>
                    <div class="input wos-flex wos-flex-row wos-align-middle">
                            <img src="@/assets/icon/password-input.svg" alt="">
                        <div class="wos-flex-auto">
                            <el-input type="password" placeholder="请输入密码" v-model="loginForm.password"/>
                        </div>
                    </div>
                </div>
              </el-form-item>
                <el-form-item prop="code">
                <div class="input-password">
                    <div class="wos-font-sm input-tip">验证码</div>
                    <div class="input input2 wos-flex wos-flex-row wos-align-middle">
                            <img src="@/assets/icon/yzm-input.svg" alt="">
                          
                            <el-input placeholder="请输入右侧计算结果" v-model="loginForm.code"/>
                          
                        <div>
                            <img @click="getCode" :src="codeUrl" alt="Loading" class="yzm">
                        </div>
                    </div>
                </div>
              </el-form-item>
                <div class="input-mask wos-flex wos-flex-row wos-flex-between">
                    <div>
                        <input type="checkbox" id="remember" v-model="loginForm.rememberMe">
                        <label for="remember" class="wos-font-sm">&nbsp;记住我</label>
                    </div>
                    <!-- <div class="wos-font-sm wos-color-blue wos-hand">
                        忘记密码
                    </div> -->
                </div>
                <el-button
                  :loading="loading"
                  size="medium"
                  class="wos-default-btn wos-hand"
                  type="primary"
                  style="width:100%;"
                  @click.native.prevent="handleLogin"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
            </div>
          </el-form>
        </div>
    </div>
  <!-- <div class="login">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">高校干部后台管理系统</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 63%"
          @keyup.enter.native="handleLogin"
        >
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width:100%;"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <div style="float: right;" v-if="register">
          <router-link class="link-type" :to="'/register'">立即注册</router-link>
        </div>
      </el-form-item>
    </el-form>
    <div class="el-login-footer">
      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div> -->
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      websiteConfig:{
        webTitle:"吉林省财经大学",
        subtitle:"干部管理系统",
        introduce:"通过数字化手段提高管理效率、简化流程，实现部层级间的信息互联互通、并规范、协同干部业务、考核业务管理标准。系统支持智能检索及干部队伍分析预警，提供及时、精准的决策分析为组织人事工作提供有力支撑",
        copyright:"版权所有 长春市我们俩文化传播有限公司",
        state:"dev", //build or dev
        version:"0.0.2",
        server:"http://180.76.175.49:10000/prod-api/",
        userConfig:{
            table:{
                pageBegin:1,
                pageSize:20
            }
        },
        userResetPwd:"12345678", //初始化密码的默认密码
    },
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: false,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getToday(y = null, m = null, d = null){
      let date
      if (y === null){
          date = new Date();
      }else{
          date = new Date(y, m, d);
      }
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? '0' + month : month; // 在月份小于10时前面补0
      let day = date.getDate();
      day = day < 10 ? '0' + day : day; // 在日期小于10时前面补0
      let weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      let week = weekday[date.getDay()];
      let formattedDate = year + '年' + month + '月' + day + '日 ' + week;
      return formattedDate;
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>
<style>
#body .el-form-item{
  margin-bottom: 0;
}
</style>
<style rel="stylesheet/scss" lang="scss">

#body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .bd {
    width: 50vw;
    height: 100vh;
    display: flex;
    align-items: center;
  }

  #left {
    background-color: rgba(92, 125, 242, 1);
    justify-content: right;

    #left-content {
      width: 650px;
      height: 800px;
      background-color: rgba(99, 131, 250, 1);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      background-image: url("/assets/images/login-icon-2.svg");
      background-position: right bottom;
      background-repeat: no-repeat;
      padding: 60px;
      color: #FFFFFF;

      #logo {
        width: 188px;
        height: 188px;
      }

      #left-content-title {
        margin-top: 30px
      }

      #title-1 {
        font-size: 32px;
      }

      #title-2 {
        font-size: 50px;
      }

      #title-3 {
        font-size: 16px;
        line-height: 26px;
      }
    }
  }

  #right {
    background-color: rgba(191, 201, 221, 0.7);
    justify-content: left;

    #right-content {
      width: 650px;
      height: 800px;
      background-color: rgba(245, 246, 250, 1);
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      padding:55px 120px 85px 120px;
        #logo{
            width: 100%;
            text-align: center;
            height: 130px;
        }
        .tip{
            text-align: center;
            margin-left: 30px;
        }
        .input-username{
            margin-top: 32px;
        }
        .input-password{
            margin-top: 16px;
        }
        .input-mask{
          margin-top: 22px;
            margin-bottom: 16px;
        }

        //.input-tip{
        //}
        .input{
            background-color: #FFFFFF;
            margin-top:10px;
            padding:12px 16px;
            border-radius: 6px;
            input{
                border:0;
                // margin-left: 10px;
                // width: 100%;
                font-size: 16px;
            }
            input:focus {
                outline: none;
            }
            .yzm{
                height: 50px;
                display: block;
            }
        }
        .input2{
          padding:7px 16px;
        }
    }
  }
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 38px;
}
</style>
